﻿<!DOCTYPE html>
<html>
<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title></title>
	<meta charset="utf-8" />
	<link href="../../dist/css/ud2.css" rel="stylesheet" />
	<link href="../src/test.css" rel="stylesheet" />
	<script src="../../vendor/js/jquery.js"></script>
	<script src="../../dist/js/ud2.js"></script>
</head>
<body>

	<h3>表格样式</h3>

	<fieldset>
		<legend>样式</legend>
		<div>
			<h5>默认样式</h5>
			<p>
				<table class="table">
					<caption>默认表格</caption>
					<tr>
						<th>这是一个简单的表格</th>
						<th>这是一个简单的表格</th>
						<th>这是一个简单的表格</th>
						<th>这是一个简单的表格</th>
						<th>这是一个简单的表格</th>
					</tr>
					<tr>
						<td>这是一个简单的表格</td>
						<td>这是一个简单的表格</td>
						<td>这是一个简单的表格</td>
						<td>这是一个简单的表格</td>
						<td>这是一个简单的表格</td>
					</tr>
				</table>
			</p>

			<hr class="hr" />

			<h5>大小</h5>
			<p>
				<table class="table sm">
					<caption>小号表格</caption>
					<tr>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
					</tr>
					<tr>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
					</tr>
				</table>

				<hr class="hr hr-dotted" />

				<table class="table">
					<caption>默认表格</caption>
					<tr>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
					</tr>
					<tr>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
					</tr>
				</table>

				<hr class="hr hr-dotted" />

				<table class="table lg">
					<caption>大号表格</caption>
					<tr>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
					</tr>
					<tr>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
					</tr>
				</table>
			</p>

			<hr class="hr" />

			<h5>带有颜色样式</h5>
			<p>
				<table class="table">
					<caption class="left">带有颜色的表格</caption>
					<tr>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
					</tr>
					<tr>
						<td>单元格</td>
						<td class="info">信息单元格</td>
						<td class="warning">警告单元格</td>
						<td class="success">成功单元格</td>
						<td class="danger">危险单元格</td>
					</tr>
					<tr>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
					</tr>
					<tr class="info">
						<td>信息单元格</td>
						<td>信息单元格</td>
						<td>信息单元格</td>
						<td>信息单元格</td>
						<td>信息单元格</td>
					</tr>
					<tr class="warning">
						<td>警告单元格</td>
						<td>警告单元格</td>
						<td>警告单元格</td>
						<td>警告单元格</td>
						<td>警告单元格</td>
					</tr>
					<tr class="success">
						<td>成功单元格</td>
						<td>成功单元格</td>
						<td>成功单元格</td>
						<td>成功单元格</td>
						<td>成功单元格</td>
					</tr>
					<tr class="danger">
						<td>危险单元格</td>
						<td>危险单元格</td>
						<td>危险单元格</td>
						<td>危险单元格</td>
						<td>危险单元格</td>
					</tr>
				</table>
			</p>

			<hr class="hr" />

			<h5>表格页头、页脚样式</h5>
			<p>
				<table class="table">
					<caption class="right">带有表格头、表格脚的表格</caption>
					<thead>
						<tr>
							<th>表格页头</th>
							<th>表格页头</th>
							<th>表格页头</th>
							<th>表格页头</th>
							<th>表格页头</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>单元格</td>
							<td>单元格</td>
							<td>单元格</td>
							<td>单元格</td>
							<td>单元格</td>
						</tr>
					</tbody>
					<tfoot>
						<tr>
							<td>表格页脚</td>
							<td>表格页脚</td>
							<td>表格页脚</td>
							<td>表格页脚</td>
							<td>表格页脚</td>
						</tr>
					</tfoot>
				</table>
			</p>

			<hr class="hr" />

			<h5>表格 hover 样式</h5>
			<p>
				<table class="table table-hover">
					<caption>hover 样式的表格</caption>
					<tr>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
						<th>单元格</th>
					</tr>
					<tr>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
						<td>单元格</td>
					</tr>
					<tr class="info">
						<td>信息单元格</td>
						<td>信息单元格</td>
						<td>信息单元格</td>
						<td>信息单元格</td>
						<td>信息单元格</td>
					</tr>
					<tr class="warning">
						<td>警告单元格</td>
						<td>警告单元格</td>
						<td>警告单元格</td>
						<td>警告单元格</td>
						<td>警告单元格</td>
					</tr>
					<tr class="success">
						<td>成功单元格</td>
						<td>成功单元格</td>
						<td>成功单元格</td>
						<td>成功单元格</td>
						<td>成功单元格</td>
					</tr>
					<tr class="danger">
						<td>危险单元格</td>
						<td>危险单元格</td>
						<td>危险单元格</td>
						<td>危险单元格</td>
						<td>危险单元格</td>
					</tr>
				</table>
			</p>

			<hr class="hr" />

			<h5>表格隔行换色样式</h5>
			<p>
				<table class="table table-striped table-hover">
					<caption>隔行换色的表格</caption>
					<thead>
						<tr>
							<th>这是一个简单的表格</th>
							<th>这是一个简单的表格</th>
							<th>这是一个简单的表格</th>
							<th>这是一个简单的表格</th>
							<th>这是一个简单的表格</th>
						</tr>
					</thead>
					<tbody>
						<tr>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
						</tr>
						<tr>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
						</tr>
						<tr>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
						</tr>
						<tr>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
						</tr>
					</tbody>
				</table>
			</p>

			<hr class="hr" />

			<h5>表格简单样式</h5>
			<p>
				<table class="table table-simple">
					<caption>表格简单样式</caption>
					<thead>
						<tr>
							<th>这是一个简单的表格</th>
							<th>这是一个简单的表格</th>
							<th>这是一个简单的表格</th>
							<th>这是一个简单的表格</th>
							<th>这是一个简单的表格</th>
						</tr>
					</thead>
					<tbody class="center">
						<tr>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
						</tr>
						<tr>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
						</tr>
						<tr>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
						</tr>
						<tr>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
							<td>这是一个简单的表格</td>
						</tr>
					</tbody>
				</table>
			</p>

		</div>
	</fieldset>

</body>
</html>
